<template>
    <div class="collate">
        <Header style="z-index:1025">
            <header-menu></header-menu>
        </Header>
        <div class="main">
            <div class="step">
                <Steps :current="1">
                    <Step title="提交预约"></Step>
                    <Step title="核对并支付"></Step>
                    <Step title="完成订单"></Step>
                </Steps>
            </div>
            <div class="orderForm">
                <p class="tit">|确认购买产品</p>
                <p class="subhead">您的手机：138******12</p>
                <ul class="title">
                    <li>产品名称</li>
                    <li>现价</li>
                    <li>优惠</li>
                    <li>操作</li>
                </ul>
                <ul class="cont">
                    <li><div class="payimg"><img src="../Pay/img/pay.png" alt=""></div>
                        <div class="paycont"><p>【鼻综合】向不美的鼻子Say ByeBye!</p><p>北京金圣整形医疗美容</p><p> 有效期：一个月</p></div>
                    </li>
                    <li class="price">
                        <p>￥19500</p>
                        <s>￥36800</s>
                    </li>
                    <li></li>
                    <li><p>在线客服</p> <p>刷新</p></li>
                </ul>
                <div class="cut">
                    <p class="tit" style="margin-top: 26px">|选择支付方式</p>
                            <div class="email">
                                <div class="email-title">
                                    支付宝/微信支付
                                    <div class="payway">
                                        <div><input type="radio" name="pay"></div><div><img src="../Pay/img/wechat.png" alt=""></div>
                                        <div><input type="radio" name="pay"></div><div><img src="../Pay/img/Alipay.png" alt=""></div>
                                    </div>
                                </div>
                                <div class="pay-bank">
                                  <p>网上银行支付 <span>(支持储蓄卡和信用卡)</span></p>
                                    <div class="payway">
                                        <ul>
                                            <li>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/ABC.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/BOB.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/BOC.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/BOCOM.png" alt=""></div>
                                            </li>
                                            <li>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/CCB.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/CEB.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/CGB.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/CIB.png" alt=""></div>
                                            </li>
                                            <li>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/CMBC.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/CMC.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/EMS.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/HZ.png" alt=""></div>
                                            </li>
                                            <li>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/ICBC.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/NS.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/PA.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/SPDB.png" alt=""></div>
                                            </li>
                                            <li>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/SRCB.png" alt=""></div>
                                                <div><input type="radio" name="pay"></div><div><img src="../Pay/img/CNCB.png" alt=""></div>
                                            </li>
                                        </ul>


                                    </div>
                                </div>
                                
                            </div>
                </div>

                <div class="order-list">
                    <ul>
                        <li><div class="order-left">需支付</div><div  class="order-right" style="color: #ff6808;font-size: 24px">￥3900.00 </div></li>
                        <li><div class="order-left">到院再付</div><div  class="order-right"style="color: #999999;font-size: 24px">￥15600.00 </div></li>
                    </ul>
                </div>
                <div class="line"></div>
                <Button type="primary" @click="next()" class="payment">支付</Button>
                <div class="prompt">
                   <h4>付款遇到问题了？先看看是不是由于下面的原因。</h4>
                    <h5>· 要求开通网上银行？</h5>
                    <p>建议选择银联在线支付付款，如果是信用卡还可选择快捷支付，再选择对应银行支付。</p>
                    <h5>· 所需支付金额超过了银行支付限额？</h5>
                    <p>建议先分若干次充值到美团余额，或登录网上银行提高上限额度，即可轻松支付。</p>
                    <h5>· 收不到银行的短信验证码？</h5>
                    <p>建议重新获取短信验证码，如果还是收不到短信，直接打各银行的客服电话获取短信验证码。</p>
                    <h5>· 网银页面显示错误或者空白？</h5>
                    <p>建议更换到IE浏览器进行支付操作，或使用银联在线支付或支付宝付款。</p>
                    <h5>· 网上银行扣款后，订单仍显示“未付款”怎么办？</h5>
                    <p>可能是由于银行的数据没有即时传输，请您不要担心，稍后刷新页面查看。如较长时间仍显示未付款，可先向银行或支</p>
                    <p>付平台获取支付凭证（扣款订单号/第三方交易号），联系红粉约惠平台客服（4009006660）为您解决</p>
                    <p class="service">联系红粉约惠客服（4009006660）</p>
                </div>

            </div>

        </div>
        <bottom-icon></bottom-icon>
        <Footer>
            <page-footer></page-footer>
        </Footer>
    </div>
</template>

<script>
    import BottomIcon from '../../components/BottomIcon/'
    import PageFooter from '../../components/Footer/'
    import HeaderMenu from '@/components/Header/'
    export default {
        name: "Collate",
        components:{
            BottomIcon,
            PageFooter,
            HeaderMenu
        },
        methods: {
            next () {
                this.$router.push({path:'/complete'})
            }
        }
    }
</script>

<style scoped lang="less">
    .main{
        background-color:#FFFBFC;
        padding-bottom: 60px;
        .step{
            width: 1200px;
            padding:30px 0 20px 200px;
            margin: 0 auto;
            overflow: hidden;
        }
        .orderForm{
            width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 60px;
            overflow: hidden;
            .tit{
                color: #ff5371;
                font-size: 20px;
                margin-bottom: 20px;
            }
            .subhead{
                text-align: center;
                font-size: 20px;
                padding-bottom: 15px;
            }
            .title li{
                width: 210px;
                height: 57px;
                line-height: 57px;
                border: 1px solid #eeeeee;
                border-right: none;
                text-align: center;
                background-color:#FFFBFC ;
                float: left;
            }
            .cont{
                clear: both;
                overflow: hidden;
            }
            .cont li{
                width: 210px;
                height: 92px;
                border: 1px solid #eeeeee;
                border-top: none;
                border-right: none;
                float: left;
            }
            .cont li:first-child,.title li:first-child{
                width: 425px;
            }
            .cont li:last-child,.title li:last-child{
                width: 230px;
                border-right:1px solid #eeeeee ;
            }
            .cont .payimg{
                float: left;
                margin: 16px;
            }
            .paycont{
                float: left;
                line-height: 20px;
                margin: 16px 0 16px 0;
            }
            .paycont p:first-child{
                color: #333333;
            }
            .paycont p:nth-child(2){
                color: #999999;
            }
            .paycont p:last-child{
                color: #ff5371;
            }
            .price{
                text-align: center;
            }
            .price p{
                color: #ff6906;
                font-size: 20px;
                line-height: 57px;
            }
            .price s{
                color: #999999;
            }
            .cont li:last-child p{
                text-align: center;
                line-height: 46px;
                color: #ff5371;
            }
            .email{
                width: 1080px;
                height:490px;
                margin-top: 5px;
                border: solid 1px #e0e0e0;
                .email-title{
                    font-size: 16px;
                    height: 120px;
                    line-height: 36px;
                    background-color: #fffbfc;
                    /*margin-bottom: 23px;*/
                    padding: 10px;
                    .payway{
                        div{
                            float: left;
                            margin: 8px 10px 0px 18px;
                        }
                    }
                }
                .pay-bank p{
                  font-size: 16px;
                    padding: 10px;
                    span{
                        color: #999999;
                    }
                }
                .payway ul li{
                    height: 60px;
                }
                .payway div{
                    float: left;
                    margin: 8px 10px 0px 18px;
                }
                .payway div input{
                    margin: 12px 0 0 10px;
                }

            }


            .order-list{
                float: right;
                width: 460px;
                margin-top: 40px;
                li{
                    height: 30px;
                    line-height: 30px;
                    overflow: hidden;
                    margin-bottom: 18px;
                    padding-bottom: 51px;
                    border-bottom: 1px dashed #eeeeee;
                }

                li:nth-last-child(2),li:last-child{
                    border-bottom:none;
                    padding-bottom: 20px;
                }
                .order-left{
                    float: left;
                    color: #333333;
                    font-size: 14px;
                }
                .order-left select,.order-left input{
                    width: 377px;
                    height: 24px;
                    border: solid 1px #e0e0e0;
                    color: #999999;
                    font-size: 12px;
                }
                .order-right{
                    float: right;
                }
                .order-right span{
                    color: #ff5371;
                }
                .order-right button{
                    outline: none;
                    border: none;
                    width: 58px;
                    height: 24px;
                    line-height: 24px;
                    color: #fff;
                    background-color: #fd5528;
                }

            }
            .line{
               padding-top: 30px;
                clear: both;
                border-bottom: .5px solid #ff5371;
            }
            .payment{
                margin: 10px 0 60px 0;
                float: right;
                width: 220px;
                height: 50px;
                font-size: 24px;
            }
            .prompt{
                width: 1088px;
                height: 416px;
                clear: right;
                background-color: #ffffff;
                border: solid 1px #e0e0e0;
                padding: 21px 0 0 21px;
            }
            .prompt h4{
                color: #333333;
                font-size: 16px;
            }
            .prompt h5{
                color: #333333;
                font-size: 14px;
                line-height: 30px;
            }
            .prompt p{
                color: #666666;
                font-size: 14px;
                line-height: 30px;
            }
            .prompt .service{
                color: #ff5371;
            }


        }
    }
</style>